<template>
  <div>
    <!-- 列表数据 -->
    <el-card class="content-card">
      <!-- 工具栏 -->
      <table-toolbar v-model:columns="columns"
                     v-model:size="size"
                     v-model:stripe="stripe"
                     @refresh="handleSearch">
        <!-- 操作区域 -->
        <el-button icon="Search" type="info" @click="handleSearch">刷新</el-button>
        <el-button icon="Setting" plain type="danger" @click="handleConfigShow">云存储配置</el-button>
        <el-button icon="UploadFilled" plain type="primary" @click="handleUploadShow">文件上传</el-button>
<!--        <el-button @click="uploadPictureRef?.open()">打开弹窗</el-button>-->
      </table-toolbar>

      <!-- 列表记录 -->
      <div class="table-wrapper">
        <!-- 列表数据 -->
        <el-table ref="tableRef"
                  v-loading="loading"
                  :data="tableData"
                  :size="size"
                  :stripe="stripe"
                  row-key="id"
                  show-overflow-tooltip
                  @select="handleSelectChange"
                  @select-all="handleSelectAll"
                  @sort-change="handleSortChange">
          <template #empty>
            <el-empty class="table-empty" description="暂无数据"/>
          </template>

          <table-column :columns="columns">
            <template #image="scope">
              <el-popover v-if="isImageUrl(scope.row.url)" placement="left" style="text-align: center;" trigger="hover" width="">
                <template #reference>
                  <img :alt="scope.row.url" :src="scope.row.url" style="height: 21px;max-width: 130px;">
                </template>
                <img :src="scope.row.url" style="max-width: 420px;">
              </el-popover>
            </template>
          </table-column>
        </el-table>

        <!-- 分页操作 -->
        <el-pagination v-if="totalCount > 0"
                       :current-page="pageQuery.pageNum"
                       :page-size="pageQuery.pageSize"
                       :page-sizes="pageSizes"
                       :total="totalCount"
                       background
                       class="table-pagination"
                       layout="total, sizes, prev, pager, next"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!-- 配置修改弹窗 -->
    <OssConfig ref="configRef"/>
    <!-- 文件上传弹窗 -->
    <OssUpload ref="uploadRef" @refresh="handleSearch"/>
    <!-- 图片设置 -->
    <UploadPicture ref="uploadPictureRef"/>
  </div>
</template>

<script lang="tsx" setup>
import { reactive, ref } from 'vue';
import { QueryForm } from '@/components/query-form';
import useLoading from '@/hooks/use-loading';
import TableColumn, { TableColumnData } from '@/components/table-column/index.vue';
import TableToolbar from '@/components/table-toolbar/index.vue';
import useTableSelection from '@/hooks/use-table-selection';
import { TableInstance } from 'element-plus';
import useTable from '@/hooks/use-table.ts';
import { sysOssList } from '@/api/api-sys.ts';
import { isImageUrl } from '@/utils/is.ts';
import OssConfig from './OssConfig.vue';
import OssUpload from './OssUpload.vue';
import { UploadPicture } from '@/components/upload-picture';

defineOptions({name: 'sys-oss'});

// 查询
const queryForm = reactive({});
const queryFormRef = ref<InstanceType<typeof QueryForm>>();
const tableRef = ref<TableInstance>();
const tableData = ref<any[]>([]);
const totalCount = ref(0);

// 列设置
const columns = ref<TableColumnData[]>([
  {prop: 'id', label: '编号', width: 105, align: 'center', sortable: 'custom'},
  {prop: 'url', label: 'URL地址', minWidth: 200, align: 'left', headerAlign: 'center'},
  {prop: 'image', label: '图片', width: 160, align: 'center'},
  {prop: 'create_time', label: '上传时间', width: 180, align: 'center', sortable: 'custom'},
]);

const [loading, setLoading] = useLoading(false);
const {tableMethods, tableState} = useTable(() => fetchDataList(), queryFormRef, true);
const {size, stripe, showQueryForm, pageQuery, pageSizes} = tableState
const {handleSizeChange, handleCurrentChange, handleSortChange, handleResetForm} = tableMethods
const {handleSelectChange, handleSelectAll, multipleSelection} = useTableSelection(tableData, tableRef);

// 数据查询
const fetchDataList = async () => {
  setLoading(true);
  try {
    // 查询数据
    const {data} = await sysOssList({
      page_num: pageQuery.pageNum,
      page_size: pageQuery.pageSize,
      order_mode: pageQuery.orderMode,
      order_column: pageQuery.orderColumn,
      ...queryForm,
    });
    // 结果转换
    tableData.value = data.list;
    totalCount.value = data.pages.total_count;
  } catch (err) {
  } finally {
    setLoading(false);
  }
};

// 刷新数据
const handleSearch = () => {
  fetchDataList();
};

/** 云存储配置 */
const configRef = ref<any>()
const handleConfigShow = () => {
  configRef.value?.open()
};

/** 文件上传 */
const uploadRef = ref<any>()
const handleUploadShow = () => {
  uploadRef.value?.open()
};

const uploadPictureRef = ref();
const handleOpenUploadPicture = () => {
  uploadPictureRef.value?.open();
};
</script>

<style lang="scss" scoped>
.system-user {
  .name-slot {
    display: flex;
    align-items: center;

    .avatar {
      margin-right: 8px;
    }
  }
}
</style>
